<template>
  <div>
    <!-- 蒙版 -->
    <transition name="fade">
      <div
        v-if="isVisable"
        @click="close"
        class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
      ></div>
    </transition>
    <!-- 内容 -->
    <!-- 内容 -->
    <transition name="up">
      <div
        v-if="isVisable"
        class="
          w-[80%]
          fixed
          top-1/3
          left-[50%]
          translate-x-[-50%]
          z-50
          px-2
          py-1.5
          rounded-sm
          border
          dark:border-zinc-600
          cursor-pointer
          bg-white
          dark:bg-zinc-800
          xl:w-[35%]
        "
      >
        <!-- 标题 -->
        <div class="text-lg font-bold text-zinc-900 dark:text-zinc-200 mb-2">
          {{ title }}
        </div>
        <!-- 内容 -->
        <div class="text-base text-zinc-900 dark:text-zinc-200 mb-2">
          {{ content }}
        </div>
        <!-- 按钮 -->
        <div class="flex justify-end">
          <base-button type="info" class="mr-2" @click="onCancelClick">{{
            cancelText
          }}</base-button>
          <base-button type="primary" @click="onConfirmClick">{{
            confirmText
          }}</base-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import BaseButton from '../base-button/index.vue';
import { ref, onMounted } from 'vue'
const props = defineProps({
  //  标题
  title: {
    type: String
  },
  // 描述
  content: {
    type: String
  },
  // 取消文本
  cancelText: {
    type: String,
    default: "取消"
  },
  // 确定文本
  confirmText: {
    type: String,
    default: "确定"
  },
  cancelHandler: {
    type: Function
  },
  confirmHandler: {
    type: Function
  },
  // 关闭事件
  close: {
    type: Function
  }
})

// 控制显示处理
const isVisable = ref(false)
/**
 * confirm 展示
 */
const show = () => {
  isVisable.value = true
}
/**
 * 页面构建完成之后，执行。保留动画
 */
onMounted(() => {
  show()
})

// 关闭动画执行时间
const duration = '0.5s'
/*
 ! confirm 关闭，保留动画执行时长 再去触发删除dom操作
 */
const close = () => {
  isVisable.value = false
  setTimeout(() => {
    if (props.close) {
      props.close()
    }
  }, parseInt(duration.replace('0.', '').replace('s', '')) * 100)
}

/**
 * 取消按钮点击事件
 */
const onCancelClick = () => {
  if (props.cancelHandler) {
    props.cancelHandler()
  }
  close()
}

/**
 * 确定按钮点击事件
 */
const onConfirmClick = () => {
  if (props.confirmHandler) {
    props.confirmHandler()
  }
  close()
}
</script>


<style lang="scss" scoped>
// v3.2新增api  动态css绑定状态
.fade-enter-active,
.fade-leave-active {
  transition: all v-bind(duration);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.up-enter-active,
.up-leave-active {
  transition: all v-bind(duration);
}

.up-enter-from,
.up-leave-to {
  opacity: 0;
  transform: translate3d(-50%, 100px, 0);
}
</style>
